<template>
  <!--tabs组件-->
  <div :class="['common-tabs',componentSetOptions.class]">
    <!--tabs-->
    <el-tabs v-model="componentSetOptions.active" @tab-click="handleClick" :stretch="componentSetOptions.stretch">
      <template v-for="(item,key) in componentSetOptions.tabsTitleProp">
        <el-tab-pane
            :key="key"
            :name="item.name"
            v-if="item.show"
        >
          <div slot="label" v-if="item.total">
            {{ item.label }}<span>（{{ item.total }}）</span>
          </div>
          <div slot="label" v-else>{{ item.label }}</div>
        </el-tab-pane>
      </template>
    </el-tabs>
    <div class="common-tabs-right">
      <el-input
          placeholder="请输入"
          v-model="componentSetOptions.keywords"
          class="key-word"
          v-if="componentSetOptions.inputShow"
      >
        <i slot="suffix"
           class="el-input__icon el-icon-search"
           @click="HandleUtils.handleParent($parent,componentSetOptions.searchClick)"
        >
        </i>
      </el-input>
      <div class="common-tabs-right-search" v-if="componentSetOptions.heightShow">
        <el-button type="info" @click="heightKeyWordShowClick">
          高级搜索
          <i :class="[componentSetOptions.heightSelectShow?'el-icon-bottom':'el-icon-top','el-icon&#45;&#45;right']"></i>
        </el-button>
      </div>
    </div>

    <!--点击高级搜索下拉出来-->
    <el-collapse-transition v-if="componentSetOptions.heightShow">
      <div v-if="componentSetOptions.heightSelectShow">
        <ul class="height-KeyWord-Show">
          <template v-for="(item,key) in componentSetOptions.heightSearchProp">
            <template v-if="item.show">

              <li :key="key" v-if="item.type.slice((item.type.length-4),item.type.length)!=='Json'">
                <span>{{ item.name }}</span>
                <!--到镇的下拉 四级联动-->
                <component
                    :is="item.customData.name"
                    :ref="item.ref"
                    :ruleForm="componentSetOptions.heightSearchData"
                    :field="item.field"
                    :type="item.customData.type"
                    v-if="item.type==='customAddressCascader'"
                    :rowData="item"
                >
                </component>
                <!-- 输入框不在json里面-->
                <el-input
                    v-if="item.type==='input'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    :placeholder="'请输入'+item.name"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                />
                <!--文本域不在json里面-->
                <el-input
                    v-if="item.type==='textarea'"
                    :style="{'width':item.width+'px'}"
                    type="textarea"
                    :autosize="{ minRows: item.minRows,maxRows:item.maxRows}"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    :placeholder="'请输入'+item.name"
                    :disabled="item.disabled"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                />
                <!--单选框不在json里面-->
                <div v-if="item.type==='radio'">
                  <el-radio-group
                      v-model="componentSetOptions.heightSearchData[item.field]"
                      @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                  >
                    <el-radio
                        v-for="(radioItem,radioKey) in item.prop"
                        :key="radioKey"
                        :disabled="item.disabled"
                        :label="radioItem.value"
                    >
                      {{ radioItem.label }}
                    </el-radio>
                  </el-radio-group>
                </div>
                <!--多选框不在json里面-->
                <el-checkbox-group
                    v-if="item.type==='checkbox'"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                >
                  <el-checkbox
                      v-for="checkboxItem in item.prop"
                      :key="checkboxItem.value"
                      :label="checkboxItem.value"
                      :disabled="item.disabled"
                  >
                    {{ checkboxItem.label }}
                  </el-checkbox>
                </el-checkbox-group>
                <!--下拉框不在json里面-->
                <el-select
                    v-if="item.type==='select'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    :placeholder="'请选择'+item.name"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                >
                  <el-option
                      v-for="selectItem in item.prop"
                      :key="selectItem.value"
                      :label="selectItem.label"
                      :value="selectItem.value"
                  >
                  </el-option>
                </el-select>
                <!--二个时间选择器不在json里面-->
                <el-date-picker
                    v-if="item.type==='date'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    :disabled="item.disabled"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :type="item.dataType"
                    value-format="timestamp"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--一个时间选择器不在json里面-->
                <el-date-picker
                    v-if="item.type==='oneDate'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.field]"
                    :placeholder="'请选择'+item.name"
                    :disabled="item.disabled"
                    :type="item.oneDataType"
                    value-format="timestamp"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.field],componentSetOptions)"
                >
                </el-date-picker>

              </li>


              <!--json数据类型-->
              <li :key="key" v-if="item.type.slice((item.type.length-4),item.type.length)==='Json'">
                <span>{{ item.name }}</span>
                <!-- 输入框在json里面-->
                <el-input
                    v-if="item.type==='inputJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    :placeholder="'请输入'+item.name"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                />
                <!--文本域在json里面-->
                <el-input
                    v-if="item.type==='textareaJson'"
                    :style="{'width':item.width+'px'}"
                    type="textarea"
                    :autosize="{ minRows: item.minRows,maxRows:item.maxRows}"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    :placeholder="'请输入'+item.name"
                    :disabled="item.disabled"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                />
                <!--单选框在json里面-->
                <div v-if="item.type==='radioJson'">
                  <el-radio-group
                      v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                      @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                  >
                    <el-radio
                        v-for="(radioItem,radioKey) in item.prop"
                        :key="radioKey"
                        :disabled="item.disabled"
                        :label="radioItem.value"
                    >
                      {{ radioItem.label }}
                    </el-radio>
                  </el-radio-group>
                </div>
                <!--多选框在json里面-->
                <el-checkbox-group
                    v-if="item.type==='checkboxJson'"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                >
                  <el-checkbox
                      v-for="checkboxItem in item.prop"
                      :key="checkboxItem.value"
                      :label="checkboxItem.value"
                      :disabled="item.disabled"
                  >
                    {{ checkboxItem.label }}
                  </el-checkbox>
                </el-checkbox-group>
                <!--下拉框在json里面-->
                <el-select
                    v-if="item.type==='selectJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    :placeholder="'请选择'+item.name"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                >
                  <el-option
                      v-for="selectItem in item.prop"
                      :key="selectItem.value"
                      :label="selectItem.label"
                      :value="selectItem.value"
                  >
                  </el-option>
                </el-select>
                <!--二个时间选择器在json里面-->
                <el-date-picker
                    v-if="item.type==='dateJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    :disabled="item.disabled"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :type="item.dataType"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--一个时间选择器不在json里面-->
                <el-date-picker
                    v-if="item.type==='oneDateJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.heightSearchData[item.jsonName][item.field]"
                    :placeholder="'请选择'+item.name"
                    :disabled="item.disabled"
                    :type="item.oneDataType"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.heightSearchData[item.jsonName][item.field],componentSetOptions)"
                >
                </el-date-picker>
              </li>

            </template>
          </template>
          <li style="margin-left: 15px">
            <el-button type="primary" icon="el-icon-search el-icon&#45;&#45;left"
                       @click="HandleUtils.handleParent($parent,componentSetOptions.heightSearchClick)">搜索
            </el-button>
          </li>
        </ul>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['componentSetOptions'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //tabs 点击
    handleClick(tab, event) {
      this.HandleUtils.handleParent(this.$parent,this.componentSetOptions.tabsClick, tab, event)
    },
    //tabs 高级搜索 点击显示隐藏
    heightKeyWordShowClick() {
      this.componentSetOptions.heightSelectShow = !this.componentSetOptions.heightSelectShow
    },
    //多选框 全选 状态
    handleCheckAllChange(key) {
      let prop = this.componentSetOptions.heightSearchProp[key];//数据源
      let field = prop.field;
      let checkAll = prop.checkAll;
      let labels = [];
      for (let i = 0; i < this.componentSetOptions[field + 'Prop'].length; i++) {
        labels.push(this.componentSetOptions[field + 'Prop'][i].value)
      }
      this.componentSetOptions.heightField[field] = checkAll ? labels : [];
      prop.indeterminate = false;
      this.HandleUtils.handleParent(this.$parent,prop.changeMethod + 'TabsChange', this.componentSetOptions.heightField[field])
    },
    //多选框 选择时候
    handleCheckedChange(key) {
      let prop = this.componentSetOptions.heightSearchProp[key];//数据源
      let field = prop.field;
      let number = this.componentSetOptions.heightField[field].length;
      let labels = [];
      for (let i = 0; i < this.componentSetOptions[field + 'Prop'].length; i++) {
        labels.push(this.componentSetOptions[field + 'Prop'][i].value)
      }
      prop.indeterminate = number > 0 && number < labels.length;
      prop.checkAll = number === labels.length;
      this.HandleUtils.handleParent(this.$parent,prop.changeMethod + 'TabsChange', this.componentSetOptions.heightField[field])
    },
  },
};
</script>

<style lang="scss" scoped>

.common-tabs {
  position: relative;

  &-right {
    position: absolute;
    top: 0;
    right: 0;
    @include flex();

    &-search {
      margin-left: 8px;
    }
  }
}

.height-KeyWord-Show {
  overflow: hidden;
  @include flex(wrap);

  li {
    float: left;
    @include flex();

    span {
      flex: 0 0 auto;
      margin: 12px;
      font-size: 14px;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-checkbox {
      margin-right: 15px;
    }

    .el-date-editor {
      width: 300px
    }
  }

  margin-bottom: 12px;
}
</style>
